<!DOCTYPE html>
<html lang="zh-cmn">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
	<title>按钮组件 - TomUI</title>
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="../public/style/css/tom.css" />
  <style>
    .widget-stage {
      padding: 50px;
    }
    .widget-stage-title {
      margin-bottom: 15px;
      font-size: 36px;
    }
    .widget-stage-desc {
      margin-bottom: 50px;
      color: gray;
      font-size: 15px;
    }
    .widget-item {
      margin-bottom: 40px;
      padding-bottom: 22px;
      border-bottom: 1px solid #E4E6E9;
    }
    .widget-item-title {
      margin-bottom: 16px;
      font-size: 22px;
    }
    .widget-item-cnt {
      *zoom: 1;
    }
    .widget-item-cnt:after {
      clear: both;
      content: ".";
      display: block;
      line-height: 0;
      font-size: 0;
      visibility: hidden;
      overflow: hidden;
    }
    .widget-item .qui-dialog,
    .widget-item .qui-dropdownMenu {
      position: relative;
      float: left;
      margin: 10px 10px 10px 0;
      top: 0 !important;
      left: 0 !important;
    }
    .widget-item .tm-inputText {
      margin-bottom: 20px;
    }
    .widget-item .qui-dialog {
      z-index: 10;
    }
  </style>
</head>
<body>


<!-- 组件区域 start -->
<div class="widget-stage">
	<div class="widget-stage-title">TomUI Button组件</div>
    <div class="widget-item">
        <div class="widget-item-title">基础按钮</div>
        <div class="widget-item-cnt">
            <a class="btn btn-default" href="javascript:;">Default</a>
            <a class="tm-btn tm-btn-ghost" href="javascript:;">Ghost</a>
            <a class="tm-btn tm-btn-dashed" href="javascript:;">Dashed</a>
            <a class="tm-btn tm-btn-text" href="javascript:;">Text</a>
            <button class="tm-btn tm-btn-circle" type="button">常规按钮</button>
        </div>
    </div>
	<div class="widget-item">
		<div class="widget-item-title">基础按钮</div>
		<div class="widget-item-cnt">
			<a class="tm-btn" href="javascript:;">Default</a>
			<a class="tm-btn tm-btn-ghost" href="javascript:;">Ghost</a>
			<a class="tm-btn tm-btn-dashed" href="javascript:;">Dashed</a>
			<a class="tm-btn tm-btn-text" href="javascript:;">Text</a>
			<button class="tm-btn tm-btn-circle" type="button">常规按钮</button>
		</div>
	</div>
	<div class="widget-item">
		<div class="widget-item-title">禁止状态按钮</div>
		<div class="widget-item-cnt">
			<a href="javascript:;" class="tm-btn disabled">禁止按钮</a>
			<button type="button" class="tm-btn" disabled="disabled">常规按钮</button>
			<input type="button" class="tm-btn" value="常规按钮" disabled="disabled" />
			<a href="javascript:;" class="tm-btn tm-btn-primary" disabled="disabled">禁止按钮</a>
			<button type="button" class="tm-btn tm-btn-primary" disabled="disabled">常规按钮</button>
			<input type="button" class="tm-btn tm-btn-primary" value="常规按钮" disabled="disabled" />
		</div>
	</div>
	<div class="widget-item">
		<div class="widget-item-title">有颜色倾向按钮</div>
		<div class="widget-item-cnt">
			<div>
				<a class="tm-btn tm-btn-ghost tm-btn-primary" href="javascript:;">主要按钮</a>
				<a class="tm-btn tm-btn-ghost tm-btn-info" href="javascript:;">信息按钮</a>
				<a class="tm-btn tm-btn-ghost tm-btn-success" href="javascript:;">成功按钮</a>
				<a class="tm-btn tm-btn-ghost tm-btn-warning" href="javascript:;">警告按钮</a>
				<a class="tm-btn tm-btn-ghost tm-btn-error" href="javascript:;">错误按钮</a>
				<a class="tm-btn tm-btn-ghost tm-btn-danger" href="javascript:;">危险按钮</a>
			</div>
			<br />
			<div>
				<a class="tm-btn tm-btn-dashed tm-btn-primary" href="javascript:;">主要按钮</a>
				<a class="tm-btn tm-btn-dashed tm-btn-info" href="javascript:;">信息按钮</a>
				<a class="tm-btn tm-btn-dashed tm-btn-success" href="javascript:;">成功按钮</a>
				<a class="tm-btn tm-btn-dashed tm-btn-warning" href="javascript:;">警告按钮</a>
				<a class="tm-btn tm-btn-dashed tm-btn-error" href="javascript:;">错误按钮</a>
				<a class="tm-btn tm-btn-dashed tm-btn-danger" href="javascript:;">危险按钮</a>
			</div>
			<br />
			<div>
				<a class="tm-btn tm-btn-primary" href="javascript:;">主要按钮</a>
				<a class="tm-btn tm-btn-info" href="javascript:;">信息按钮</a>
				<a class="tm-btn tm-btn-success" href="javascript:;">成功按钮</a>
				<a class="tm-btn tm-btn-warning" href="javascript:;">警告按钮</a>
				<a class="tm-btn tm-btn-error" href="javascript:;">错误按钮</a>
				<a class="tm-btn tm-btn-danger" href="javascript:;">危险按钮</a>
			</div>
		</div>
	</div>
	<div class="widget-item">
		<div class="widget-item-title">不同尺寸按钮</div>
		<div class="widget-item-cnt">
			<button type="button" class="tm-btn-primary tm-btn tm-btn-large">大型按钮</button>
			<button type="button" class="tm-btn-primary tm-btn">正常按钮</button>
			<button type="button" class="tm-btn-primary tm-btn tm-btn-small">小型按钮</button>
			<button type="button" class="tm-btn-primary tm-btn tm-btn-mini">迷你按钮</button>
		</div>
		<br />
		<div class="widget-item-cnt">
			<button type="button" class="tm-btn-primary tm-btn-circle tm-btn tm-btn-large">大型按钮</button>
			<button type="button" class="tm-btn-primary tm-btn-circle tm-btn">正常按钮</button>
			<button type="button" class="tm-btn-primary tm-btn-circle tm-btn tm-btn-small">小型按钮</button>
			<button type="button" class="tm-btn-primary tm-btn-circle tm-btn tm-btn-mini">迷你按钮</button>
		</div>
	</div>
	<div class="widget-item">
		<div class="widget-item-title">图标按钮</div>
		<div class="widget-item-cnt">
			<button type="button" class="tm-btn-primary tm-btn">
				<i class="tm-icon tm-checkmark-round"></i>
				<span>正常按钮</span>
			</button>
			<button type="button" class="tm-btn tm-btn-primary tm-btn-loading">
				<i class="tm-icon tm-load-c tm-load-loop"></i>
				&nbsp;Loading...
			</button>
			<button type="button" class="tm-btn-primary tm-btn tm-btn-large">
				<i class="tm-icon tm-checkmark-round"></i>
				<span>正常按钮</span>
			</button>
		</div>
	</div>
	<div class="widget-item">
		<div class="widget-item-title">长按钮</div>
		<div class="widget-item-cnt">
			<button type="button" class="tm-btn-primary tm-btn tm-btn-large tm-btn-long">大型按钮</button>
			<br />
			<br />
			<button type="button" class="tm-btn-primary tm-btn tm-btn-long">正常按钮</button>
			<br />
			<br />
			<button type="button" class="tm-btn-primary tm-btn tm-btn-small tm-btn-danger tm-btn-long">正常按钮</button>
		</div>
	</div>
</div>
<!-- 组件区域 end -->

</body>
</html>
